<template>
  <!-- 安防-累计数据 security-accumulate -->
  <div class="monitor-capture chart-box1">
    <div class="chart-title">监控识别抓拍</div>
    <div class="chart-content" align="middle">
      <a-row align="middle" :gutter="0" style="width: 100%; height: 100%">
        <a-col :span="16" class="monitor-left">
          <div class="monitor-left-item">
            <template v-if="currentPic">
              <img :src="currentPic" alt="" class="monitor-left-item-pic" />
            </template>
          </div>
        </a-col>
        <a-col
          :span="8"
          class="monitor-right datav-scroller-bar"
          @scroll="handleScroll"
        >
          <div class="monitor-people-list" ref="monitorPeopleListRef">
            <div
              class="monitor-right-item"
              v-for="(item, index) of list"
              :key="index"
              @click="onPeopleClick(item)"
            >
              <template v-if="item.picture_url">
                <img
                  :src="item.picture_url"
                  alt=""
                  class="monitor-right-item-avatar"
                />
              </template>

              <!-- <div class="monitor-right-item-desc">
                <div>姓名：--</div>
                <div>性别：--</div>
                <div>年龄：--</div>
              </div> -->
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, ref } from "vue";
import CountTo from "../countTo/index.vue";
import common from "../../utils/common";
import request from "../../../../common/utils/request";

export default defineComponent({
  name: "MonitorCapture",
  components: { CountTo },
  setup(props) {
    let keyCount = 1;
    const state = reactive({
      chartKey: `current_peak_${keyCount}`,
      list: [],
      currentPic: "",
      hasMore: false,
      page: 1,
      pageSize: 6,
    });

    const getData = () => {
      request
        .get("/work_iot", "/center/alarm/show", {
          page: state.page,
          pageSize: state.pageSize,
        })
        .then((res) => {
          state.list = res.list;
          if (res.list.length > 0) {
            state.currentPic = res.list[0].picture_url;
          }
          if (state.page < res.total_page) {
            state.hasMore = true;
          } else {
            state.hasMore = false;
          }
        });
    };

    getData();

    const onPeopleClick = (item) => {
      state.currentPic = item.picture_url;
    };

    const monitorPeopleListRef = ref(null);

    const handleScroll = (e) => {
      if (
        e.target.scrollTop + e.target.offsetHeight + 1 >=
        monitorPeopleListRef.value.offsetHeight
      ) {
        console.log("滑到底部了");
        if (state.hasMore) {
          state.page++;
          loadMore();
        }
      }
    };

    const loadMore = () => {
      request
        .get("/work_iot", "/center/alarm/show", {
          page: state.page,
          pageSize: state.pageSize,
        })
        .then((res) => {
          state.list = state.list.concat(res.list);
          if (state.page < res.total_page) {
            state.hasMore = true;
          } else {
            state.hasMore = false;
          }
        });
    };

    return {
      ...toRefs(state),
      onPeopleClick,
      handleScroll,
      monitorPeopleListRef,
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";

.monitor-left {
  height: 100%;
  padding-right: 0.6rem;

  .monitor-left-item {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    overflow: hidden;

    .monitor-left-item-pic {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
.monitor-right {
  height: 100%;
  overflow: hidden auto;
  padding-right: 0.6rem;

  .monitor-right-item {
    width: 100%;
    // height: calc((100% - 1.2rem) / 3);
    height: 7.1rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-top: 0.6rem;
    // padding: 1rem;
    cursor: pointer;
    overflow: hidden;

    &:first-child {
      margin-top: 0;
    }

    .monitor-right-item-avatar {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .monitor-right-item-desc {
      width: 60%;
      padding-left: 1rem;
      text-align: left;
      font-size: 1.2rem;
    }
  }
}
</style>
